<template>
  <!-- 使用state -->
  <h6>{{ $store.state.username }}</h6>
  <hr />
  <!-- 使用getters -->
  <h6>{{ $store.getters.newUsername }}</h6>
  <!-- 使用mutations -->
  <button @click="$store.commit('updateUsername', 'lihua')">
    change username
  </button>
  <br />
  <!-- actions -->
  <button @click="onClickHandler">change actions</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
// 导入ref
// import { ref, computed } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "App",
  // 组合式API入口

  setup() {
    // 定义参数
    const store = useStore();
    console.log(store.state.username);
    console.log(store.getters.newUsername);
    // 调用 store 中的方法
    // store.commit("updateUsername");
    // actions
    const onClickHandler = () => {
      store.dispatch("updateName");
    };

    // 返回值
    return { onClickHandler };
  },
  components: {},
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
